// Copyright (c) 2025 coze-dev Authors
// SPDX-License-Identifier: Apache-2.0
/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable max-len */
import createEle from 'crelt';

interface IconProps extends Record<string, unknown> {
  checked?: boolean;
  checkable?: boolean;
  onchange?: () => void;
  disabled?: boolean;
}

abstract class Icon {
  readonly dom: HTMLElement;
  public _checked?: boolean;
  private _disabled?: boolean;
  private checkable?: boolean;

  constructor(attr: IconProps = {}) {
    const { onchange, checked, checkable = true, disabled, ...rest } = attr;

    this.checkable = checkable;
    this._checked = checked || false;
    this._disabled = disabled || false;

    this.dom = createEle(
      'button',
      {
        class: this._checked
          ? 'cm-custom-search-panel-icon cm-custom-search-panel-icon-active'
          : 'cm-custom-search-panel-icon',
        type: 'button',
        onclick: () => {
          this.checked = !this.checked;
          onchange?.();
        },
        ...rest,
      },
      [this.getSVG()],
    );
  }

  abstract getSVG(): HTMLSpanElement;

  get checked() {
    return this._checked;
  }

  set checked(checked) {
    if (this.checkable) {
      if (checked) {
        if (
          !this.dom.classList.contains('cm-custom-search-panel-icon-active')
        ) {
          this.dom.classList.add('cm-custom-search-panel-icon-active');
        }
      } else {
        this.dom.classList.remove('cm-custom-search-panel-icon-active');
      }
    }

    this._checked = checked;
  }

  get disabled() {
    return this._disabled;
  }

  set disabled(disabled) {
    if (disabled) {
      if (
        !this.dom.classList.contains('cm-custom-search-panel-icon-disabled')
      ) {
        this.dom.classList.add('cm-custom-search-panel-icon-disabled');
      }
    } else {
      this.dom.classList.remove('cm-custom-search-panel-icon-disabled');
    }

    this._disabled = disabled;
  }
}

export class IconCaseSensitive extends Icon {
  constructor(attr: IconProps = {}) {
    super(attr);
  }

  getSVG() {
    const span = document.createElement('span');
    span.innerHTML =
      '<svg t="1749105226766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4424" width="14" height="14"><path d="M270.628571 197.485714L21.942857 811.885714h73.142857l73.142857-190.171428h277.942858l80.457142 190.171428h73.142858L343.771429 197.485714h-73.142858z m-73.142857 373.028572l102.4-263.314286c7.314286-7.314286 7.314286-21.942857 14.628572-43.885714 7.314286 21.942857 7.314286 36.571429 14.628571 43.885714l102.4 263.314286H197.485714zM980.114286 709.485714V526.628571c7.314286-117.028571-51.2-175.542857-175.542857-168.228571-109.714286-7.314286-175.542857 36.571429-204.8 131.657143l65.828571 21.942857c14.628571-73.142857 58.514286-102.4 131.657143-95.085714 80.457143-7.314286 117.028571 36.571429 109.714286 117.028571-21.942857 14.628571-73.142857 29.257143-153.6 36.571429-109.714286 7.314286-160.914286 58.514286-160.914286 146.285714 7.314286 73.142857 58.514286 109.714286 153.6 117.028571 80.457143 0 138.971429-21.942857 175.542857-73.142857 0 21.942857 7.314286 43.885714 21.942857 58.514286h65.828572c-29.257143-29.257143-36.571429-58.514286-29.257143-109.714286z m-73.142857-65.828571c-7.314286 80.457143-58.514286 124.342857-153.6 131.657143-58.514286-7.314286-95.085714-29.257143-95.085715-73.142857s36.571429-73.142857 117.028572-87.771429c80.457143-7.314286 124.342857-14.628571 131.657143-36.571429v65.828572z" fill="currentColor" p-id="4425"></path></svg>';

    return span;
  }
}

export class IconRegExp extends Icon {
  constructor(attr: IconProps = {}) {
    super(attr);
  }

  getSVG() {
    const span = document.createElement('span');
    span.innerHTML =
      '<svg t="1749105951963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10628" width="12" height="12"><path d="M192 794.752c-18.816 0-33.92 6.272-45.184 18.816a61.632 61.632 0 0 0-18.816 45.184c0 17.6 6.272 33.92 18.816 46.4a61.44 61.44 0 0 0 45.184 17.6c17.6 0 32.64-6.272 45.184-17.6 12.544-12.544 18.816-28.8 18.816-46.4a61.632 61.632 0 0 0-18.816-45.184 61.632 61.632 0 0 0-45.184-18.816zM612.864 88.448h62.208l-5.76 235.008 214.272-79.488 19.584 58.752-218.88 69.12 146.304 178.56-48.384 38.016-138.24-185.472-138.24 185.472-47.232-38.016 145.152-178.56-218.88-69.12 19.584-58.752 214.272 79.488-5.76-235.008z" fill="currentColor" p-id="10629"></path></svg>';

    return span;
  }
}

export class IconWholeWord extends Icon {
  constructor(attr: IconProps = {}) {
    super(attr);
  }
  getSVG() {
    const span = document.createElement('span');
    span.innerHTML =
      '<svg t="1749105508508" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7841" width="16" height="16"><path d="M160 192h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64z m0 576h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64z m276.8-94.688l-19.68-51.744H249.504l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.352 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52s-12.096-16.416-12.096-26.16c0-5.632 0.928-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.456-267.76 10.832-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0 1 18.848-17.28c7.776-4.416 17.392-6.624 28.816-6.624 11.632 0 21.328 2.208 29.12 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.768 6.928 8.8 14.384 12.08 22.352 3.28 7.968 7.456 18.608 12.528 31.92l107.712 266.08c8.432 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 0 1-28.832 11.952c-6.56 0-12.192-1.168-16.864-3.52a34.56 34.56 0 0 1-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 0 1-9.44-22.08z m-165.36-114.464h123.2l-62.176-170.16-61.024 170.16zM776 683.712c-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.368 10.832-19.68 0-36.976-3.888-51.888-11.664-14.896-7.776-26.4-18.336-34.448-31.648a82.096 82.096 0 0 1-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.864-1.12 16.96-3.664 36.272-7.6a1589.856 1589.856 0 0 0 49.648-10.832 949.488 949.488 0 0 0 44.864-11.952c-0.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.504 0-34.176 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.04 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.424-12.608-9.424-21.232 0-13.504 4.8-26.624 14.352-39.376 9.552-12.752 24.48-23.248 44.72-31.504s45.472-12.368 75.648-12.368c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.912 37.824 7.984 17.248 11.968 40.128 11.968 68.624a6293.76 6293.76 0 0 1-0.576 87.744c0 14.448 2.4 29.488 7.184 45.152 4.768 15.648 7.168 25.728 7.168 30.24 0 7.856-3.712 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208z m-5.056-111.088c-11.264 4.128-27.616 8.48-49.088 13.072-21.472 4.608-36.32 7.968-44.576 10.128s-16.128 6.384-23.616 12.656c-7.52 6.288-11.264 15.04-11.264 26.304 0 11.616 4.416 21.52 13.232 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.184 0 29.2-3.328 42.048-9.984 12.832-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976z" p-id="7842" fill="currentColor"></path></svg>';

    return span;
  }
}

export class IconArrowUp extends Icon {
  constructor(attr: IconProps = {}) {
    super({ ...attr, checkable: false });
  }

  getSVG() {
    const span = document.createElement('span');
    span.innerHTML = `<svg
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            focusable=false
            aria-hidden=true
        >
            <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M12 23C11.1716 23 10.5 22.3284 10.5 21.5L10.5 6.12132L4.06066 12.5607C3.47487 13.1464 2.52513 13.1464 1.93934 12.5607C1.35355 11.9749 1.35355 11.0251 1.93934 10.4393L10.9393 1.43934C11.5251 0.853554 12.4749 0.853554 13.0607 1.43934L22.0607 10.4393C22.6464 11.0251 22.6464 11.9749 22.0607 12.5607C21.4749 13.1464 20.5251 13.1464 19.9393 12.5607L13.5 6.12132L13.5 21.5C13.5 22.3284 12.8284 23 12 23Z"
                fill="currentColor"
            />
        </svg>`;

    return span;
  }
}

export class IconArrowDown extends Icon {
  constructor(attr: IconProps = {}) {
    super({ ...attr, checkable: false });
  }

  getSVG() {
    const span = document.createElement('span');
    span.innerHTML = `<svg
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            focusable=false
            aria-hidden=true
        >
            <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M12 1C12.8284 1 13.5 1.67157 13.5 2.5V17.8787L19.9393 11.4393C20.5251 10.8536 21.4749 10.8536 22.0607 11.4393C22.6464 12.0251 22.6464 12.9749 22.0607 13.5607L13.0607 22.5607C12.4749 23.1464 11.5251 23.1464 10.9393 22.5607L1.93934 13.5607C1.35355 12.9749 1.35355 12.0251 1.93934 11.4393C2.52513 10.8536 3.47487 10.8536 4.06066 11.4393L10.5 17.8787V2.5C10.5 1.67157 11.1716 1 12 1Z"
                fill="currentColor"
            />
        </svg>`;

    return span;
  }
}

export class IconReplace extends Icon {
  constructor(attr: IconProps = {}) {
    super({ ...attr, checkable: false });
  }

  getSVG() {
    const span = document.createElement('span');
    span.innerHTML =
      '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M206.144 239.296l144.704 145.216L492.8 242.176l-44.8-44.8-64.768 64.448-0.512-102.4a33.472 33.472 0 0 1 32-33.664H512V64H414.72A94.848 94.848 0 0 0 320 159.296V262.4L251.328 194.112l-45.184 45.184z m426.88 114.816h0.64c11.712 19.904 28.864 29.888 51.584 29.888 25.152 0 45.184-10.752 60.16-32.192 15.104-21.44 22.592-49.92 22.592-85.312 0-32.704-6.4-58.432-19.264-77.248-12.864-18.88-31.232-28.288-55.04-28.288-25.92 0-45.952 12.416-60.032 37.184h-0.64V64H576v314.816h56.96v-24.704z m-0.96-67.904v-21.76c0-15.872 3.712-28.672 11.2-38.464a34.56 34.56 0 0 1 28.48-14.72 31.36 31.36 0 0 1 27.904 14.912c6.656 9.856 9.92 23.552 9.92 41.152 0 21.12-3.584 37.568-10.816 49.152a33.536 33.536 0 0 1-30.08 17.28 31.68 31.68 0 0 1-26.304-13.504 54.592 54.592 0 0 1-10.24-34.048zM576 817.216c-16.384 9.856-40 14.784-70.912 14.784-36.032 0-65.28-11.392-87.616-34.112-22.336-22.72-33.472-52.032-33.472-87.936 0-41.472 11.904-74.112 35.84-97.92 23.936-24.064 56-36.032 96-36.032 27.712 0 47.744 3.84 60.16 11.456v63.872a80.64 80.64 0 0 0-50.688-17.664c-20.8 0-37.312 6.4-49.536 19.072-12.16 12.544-18.112 29.952-18.112 52.224 0 21.632 5.76 38.592 17.408 51.008 11.648 12.224 27.584 18.368 47.936 18.368 18.048 0 35.712-5.888 52.992-17.664v60.544zM256 448L192 512v384l64 64h448l64-64V512l-64-64H256z m0 64h448v384H256V512z" fill="currentColor"></path></svg>';

    return span;
  }
}

export class IconReplaceAll extends Icon {
  constructor(attr: IconProps = {}) {
    super({ ...attr, checkable: false });
  }

  getSVG() {
    const span = document.createElement('span');
    span.innerHTML =
      '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M742.4 171.328c9.408-19.84 22.784-29.76 40.064-29.76 15.872 0 28.16 7.552 36.672 22.592 8.576 15.104 12.864 35.648 12.864 61.824 0 28.352-4.992 51.072-15.04 68.288-9.984 17.152-23.36 25.728-40.128 25.728-15.168 0-26.624-8-34.368-23.936h-0.512v19.84H704V64h37.952v107.328h0.512z m-1.024 70.4a49.92 49.92 0 0 0 6.848 27.264c4.544 7.232 10.432 10.816 17.536 10.816 8.704 0 15.36-4.608 20.096-13.824 4.8-9.28 7.232-22.4 7.232-39.36 0-14.08-2.24-24.96-6.656-32.896-4.288-7.936-10.496-11.968-18.56-11.968-7.68 0-14.016 3.968-19.008 11.84a56.704 56.704 0 0 0-7.488 30.72v17.408zM263.68 492.48L128 356.352l42.368-42.368 64.384 64v-96.64A88.96 88.96 0 0 1 323.52 192H473.6v57.92H323.52a31.36 31.36 0 0 0-29.952 31.552l0.448 96 60.736-60.416 41.984 41.984-133.12 133.44zM598.784 315.52H640V206.08C640 154.112 619.84 128 579.584 128c-8.64 0-18.24 1.536-28.8 4.672a92.416 92.416 0 0 0-24.832 10.688v42.56c15.168-12.992 31.168-19.456 48-19.456 16.704 0 25.088 9.984 25.088 30.016l-38.4 6.592c-32.384 5.504-48.64 25.984-48.64 61.504 0 16.832 3.904 30.272 11.712 40.384A39.04 39.04 0 0 0 556.16 320c18.56 0 32.576-10.24 42.048-30.72h0.576v26.24z m0.256-86.72v12.352c0 11.2-2.56 20.48-7.68 27.904a23.552 23.552 0 0 1-20.032 10.88 17.664 17.664 0 0 1-14.08-6.08 24.32 24.32 0 0 1-5.12-15.872c0-14.208 7.04-22.464 21.248-24.896l25.6-4.288zM448 827.52h-41.216v-26.24h-0.576c-9.472 20.48-23.488 30.72-42.048 30.72a39.04 39.04 0 0 1-32.448-15.04c-7.808-10.112-11.712-23.552-11.712-40.32 0-35.584 16.256-56.064 48.64-61.568l38.4-6.592c0-20.032-8.32-30.08-25.088-30.08-16.832 0-32.832 6.528-48 19.52v-42.56c6.08-4.032 14.336-7.616 24.832-10.688 10.56-3.136 20.16-4.672 28.8-4.672 40.32 0 60.416 26.048 60.416 78.08v109.44z m-40.96-74.368v-12.352l-25.6 4.352c-14.208 2.368-21.312 10.624-21.312 24.832 0 6.4 1.728 11.712 5.12 15.872a17.664 17.664 0 0 0 14.08 6.08 23.552 23.552 0 0 0 19.968-10.88c5.12-7.424 7.68-16.64 7.68-27.904zM592.768 832c20.544 0 36.352-3.712 47.232-11.072v-45.44a57.6 57.6 0 0 1-35.328 13.248 39.616 39.616 0 0 1-32-13.76c-7.68-9.28-11.584-22.08-11.584-38.272 0-16.64 4.032-29.696 12.096-39.168a41.216 41.216 0 0 1 33.024-14.272c12.416 0 23.68 4.416 33.792 13.248v-47.936c-8.256-5.76-21.632-8.576-40.064-8.576-26.688 0-48.064 8.96-64.064 27.008-15.936 17.92-23.872 42.368-23.872 73.472 0 26.88 7.424 48.896 22.336 65.92 14.848 17.088 34.368 25.6 58.432 25.6zM128 576l64-64h576l64 64v320l-64 64H192l-64-64V576z m64 0v320h576V576H192z m192-128l64-64h448l64 64v320l-64 64V448H384z" fill="currentColor"></path></svg>';

    return span;
  }
}

export class IconClose extends Icon {
  constructor(attr: IconProps = {}) {
    super({ ...attr, checkable: false });
  }

  getSVG() {
    const span = document.createElement('span');
    span.innerHTML = `<svg
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            focusable=false
            aria-hidden=true
        >
            <path
                d="M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z"
                fill="currentColor"
            />
        </svg>`;

    return span;
  }
}

export class IconEnter extends Icon {
  constructor(attr: IconProps = {}) {
    super({ ...attr, checkable: false });
  }

  getSVG() {
    const span = document.createElement('span');
    span.innerHTML =
      '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M896 277.333333a21.333333 21.333333 0 0 0-21.333333-21.333333h-42.666667a21.333333 21.333333 0 0 0-21.333333 21.333333V469.333333H270.08l146.773333-146.773333a20.906667 20.906667 0 0 0 0-29.866667l-30.293333-30.293333a21.333333 21.333333 0 0 0-30.293333 0l-218.88 218.88a32.853333 32.853333 0 0 0-9.386667 22.613333v16.213334a32 32 0 0 0 9.386667 22.613333l219.306666 218.88a21.333333 21.333333 0 0 0 30.293334 0l30.293333-29.866667a21.333333 21.333333 0 0 0 0-30.293333L270.08 554.666667H810.666667a85.333333 85.333333 0 0 0 85.333333-85.333334zM227.413333 512z" fill="currentColor" ></path></svg>';

    return span;
  }
}

export class IconChevronRight extends Icon {
  constructor(attr: IconProps = {}) {
    super({ ...attr });
  }

  getSVG() {
    const span = document.createElement('span');
    span.innerHTML = `<svg
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            focusable=false
            aria-hidden=true
        >
            <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z"
                fill="currentColor"
            />
        </svg>`;

    return span;
  }
}
